<template>
    <form method="post">
        <div style="width: 100%; overflow: hidden">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left"><font style="font-size: 25px; font-family: 微软雅黑">基本信息</font></div>
            <div style="width: 45.8%; height: 100%; float: left; text-align: right; margin-right: 5px">
                <font style="font-size: 20px; font-family: 微软雅黑; color: #356cb3">单位：万元、公顷</font>
            </div>
            <div style="width: 4%; height: 100%; float: right; text-align: right"></div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="项目名称" prop="proName" style="width: 96%">
                            <el-input v-model="ruleForm.proName" placeholder="请填写项目名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目区位" prop="proLocation">
                            <el-input v-model="ruleForm.proLocation" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目类型" prop="proType">
                            <el-select v-model="ruleForm.proType" placeholder="请选择项目类型" style="width: 90%">
                                <el-option label="旱地改水田提升" value="1"></el-option>
                                <el-option label="垦造水田" value="2"></el-option>
                                <el-option label="垦造耕地" value="3"></el-option>
                                <el-option label="建设用地复垦" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="竣工面积" prop="completedArea">
                            <el-input v-model="ruleForm.completedArea" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="竣工新增旱地面积" prop="newLandArea">
                            <el-input v-model="ruleForm.newLandArea" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="竣工旱地改水田面积" prop="waterImprovementArea">
                            <el-input v-model="ruleForm.waterImprovementArea" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="竣工垦造水田面积" prop="paddyField">
                            <el-input v-model="ruleForm.paddyField" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="立项时间" prop="projectApproval">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.projectApproval"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="拟竣工时间" prop="completedTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.completedTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="实施单位" prop="implCompany">
                            <el-input v-model="ruleForm.implCompany" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属乡镇" prop="department">
                            <el-select v-model="ruleForm.department" placeholder="请选择乡镇" style="width: 90%">
                                <el-option label="桐君街道" value="桐君街道"></el-option>
                                <el-option label="城南街道" value="城南街道"></el-option>
                                <el-option label="旧县街道" value="旧县街道"></el-option>
                                <el-option label="凤川街道" value="凤川街道"></el-option>
                                <el-option label="江南镇" value="江南镇"></el-option>
                                <el-option label="横村镇" value="横村镇"></el-option>
                                <el-option label="富春江镇" value="富春江镇"></el-option>
                                <el-option label="瑶琳镇" value="瑶琳镇"></el-option>
                                <el-option label="分水镇" value="分水镇"></el-option>
                                <el-option label="百江镇" value="百江镇"></el-option>
                                <el-option label="钟山镇" value="钟山镇"></el-option>
                                <el-option label="新合乡" value="新合乡"></el-option>
                                <el-option label="莪山乡" value="莪山乡"></el-option>
                                <el-option label="合村乡" value="合村乡"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工单位" prop="constructionUnit">
                            <el-input v-model="ruleForm.constructionUnit" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工单位负责人" prop="functionary">
                            <el-input v-model="ruleForm.functionary" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="监理单位" prop="supervisorCompany">
                            <el-input v-model="ruleForm.supervisorCompany" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监理单位负责人" prop="supervising">
                            <el-input v-model="ruleForm.supervising" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <div id="asdaf" align="center" style="width:80%;"> -->

                <el-tabs type="border-card" id="id_tabs">
                    <!-- 计划投资信息 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhtz"><font class="lableFont"> 计划投资信息</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="总投资" prop="totalInvestment">
                                        <el-input v-model="ruleForm.totalInvestment" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="施工工程费用" prop="projectCost">
                                        <el-input v-model="ruleForm.projectCost" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他费用" prop="otherExpenses">
                                        <el-input v-model="ruleForm.otherExpenses" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="亩均投资" prop="mjInvestment">
                                        <el-input v-model="ruleForm.mjInvestment" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="资金来源" prop="sourceFunds">
                                        <el-input v-model="ruleForm.sourceFunds" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 计划建设信息 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhjs"><font class="lableFont"> 计划建设信息</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="计划建设总投资规模" prop="totalInvestmentScale">
                                        <el-input v-model="ruleForm.totalInvestmentScale" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="开发规模" prop="exploitation">
                                        <el-input v-model="ruleForm.exploitation" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="计划可用于占补平衡水面积" prop="space">
                                        <el-input v-model="ruleForm.space" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="jsxx_title">计划新增耕地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地面积" prop="saveArea">
                                        <el-input v-model="ruleForm.saveArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="新增水田平均质量等级" prop="saveWaterArea">
                                        <el-input v-model="ruleForm.saveWaterArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地中水田面积" prop="paddyArea">
                                        <el-input v-model="ruleForm.paddyArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="水田级别" prop="waterLevel">
                                        <el-input v-model="ruleForm.waterLevel" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 计划新增耕地 -->
                    <!-- <el-tab-pane>
                        <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 计划新增耕地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            
                        </div>
                    </el-tab-pane> -->
                </el-tabs>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
import project from '../../../../api/lx_infor/lx_infor';

export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                proName: '',
                proLocation: '',
                proType: '',
                completedArea: '',
                newLandArea: '',
                waterImprovementArea: '',
                paddyField: '',
                projectApproval: '',
                completedTime: '',
                implCompany: '',
                constructionUnit: '',
                supervisorCompany: '',
                totalInvestment: '',
                dfzj: '',
                zyfcfy: '',
                dffcfy: '',
                ztz: '',
                projectCost: '',
                otherExpenses: '',
                mjInvestment: '',
                sourceFunds: '',
                totalInvestmentScale: '',
                exploitation: '',
                space: '',
                saveArea: '',
                saveWaterArea: '',
                paddyArea: '',
                waterLevel: '',
                functionary: '',
                supervising: '',
                department: '',
                status: '',
                createTime:null,
                updateTime:null
            },
            rules: {
                proName: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' }
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                proLocation: [{ required: true, message: '请填写项目区位', trigger: 'change' }],
                //region: [{ required: true, message: '请填写所在县', trigger: 'change' }],
                proType: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
                completedArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                newLandArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                waterImprovementArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                paddyField: [{ required: true, validator: checkNum, trigger: 'blur' }],
                projectApproval: [{ required: true, message: '请选择立项时间', trigger: 'change' }],
                completedTime: [{ required: true, message: '请选择拟竣工时间', trigger: 'change' }],
                implCompany: [{ required: true, message: '请填写实施单位', trigger: 'change' }],
                constructionUnit: [{ required: true, message: '请填写施工单位', trigger: 'change' }],
                supervisorCompany: [{ required: true, message: '请填写监理', trigger: 'change' }],
                totalInvestment: [{ required: true, validator: checkNum, trigger: 'blur' }],
                projectCost: [{ required: true, validator: checkNum, trigger: 'blur' }],
                otherExpenses: [{ required: true, validator: checkNum, trigger: 'blur' }],
                mjInvestment: [{ required: true, validator: checkNum, trigger: 'blur' }],
                totalInvestmentScale: [{ required: true, validator: checkNum, trigger: 'blur' }],
                space: [{ validator: checkNum, trigger: 'blur' }],
                saveArea: [{ validator: checkNum, trigger: 'blur' }],
                paddyArea: [{ validator: checkNum, trigger: 'blur' }],
                functionary: [{ required: true, message: '请选择施工单位负责人', trigger: 'change' }],
                supervising: [{ required: true, message: '请选择监理单位负责人', trigger: 'change' }],
                department: [{ required: true, message: '请选择所属乡镇', trigger: 'change' }],
                // distance: [{ validator: checkNum, trigger: 'blur' }],
                // xmjsq: [{ validator: checkNum, trigger: 'change' }],
                // lxrq: [{ required: true, message: '请选择立项日期', trigger: 'change' }],
                // lxwh: [{ required: true, message: '请选择立项文号', trigger: 'change' }],
                // lxwjmc: [{ required: true, message: '请填写立项文件名称', trigger: 'change' }],
                // lxjg: [{ required: true, message: '请填写立项机关', trigger: 'change' }],
            }
        };
    },
    created() {
        
        this.init();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if ($('#idframe', window.parent.document).attr('data-id') != null) {
                //从路径获取id值
                const id = $('#idframe', window.parent.document).attr('data-id');
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.ruleForm = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                //修改
                this.update();
            }
        },

        onSubmit() {
            this.ruleForm.status = 1
            project.save(this.ruleForm)
                .then(response => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        shutdown() {
            window.close();
        },
        // 获取信息
        getInfo(id) {
            project.openInfo(id).then((response) => {
                this.ruleForm = response.data;
            });
        },
        // 更改信息
        update() {
            this.ruleForm.updateTime = null
            this.ruleForm.createTime = null
            project.updateInfo(this.ruleForm).then((response) => {
                
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
.jsxx_title {
    font-family: '微软雅黑';
    color: #356cb3;
    font-size: 25px;
}
</style>